<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="mbx">
      <el-breadcrumb-item :to="'/components/main'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>水质反演专题</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="10">
      <el-col :span="24">
        <div class="grid-content">
          <el-steps :active="active" finish-status="success" simple>
            <el-step
              @click.native="on_click(0)"
              title="专题介绍"
              icon="el-icon-document-copy"
            ></el-step>
            <el-step
              @click.native="on_click(1)"
              title="原始数据"
              icon="el-icon-document-copy"
            ></el-step>
            <el-step
              @click.native="on_click(2)"
              title="岸线提取"
              icon="el-icon-picture"
            ></el-step>
            <el-step
              @click.native="on_click(3)"
              title="岸线指标计算"
              icon="el-icon-notebook-2
"
            ></el-step>
            <el-step
              @click.native="on_click(4)"
              title="形态管控"
              icon="el-icon-notebook-2
"
            ></el-step>
          </el-steps>

          <div class="form1" v-if="active == 0">
            <el-row class="mid">
              <el-col :span="24">
                <div class="introduce jiacu">
                  本专题用于展示基于2016年斧头湖遥感影像的湖泊形态管控完整处理流程。
                </div>
                <div class="introduce">
                  流程涉及到的数据均存储在河湖空间大数据平台下，包括HDFS分布式文件系统、MongoDB集群、ElasticSearch集群、HBase集群、MySQL集群。针对栅格数据的部分处理在分布式计算框架Spark中运行以提高数据处理速度。
                </div>
                <div class="introduce">
                  整个流程通过图像处理、空间分析相关工具，对斧头湖遥感影像进行水体提取得到湖岸线，进而计算周长、面积等形态指标。各指标计算结果与相应参考值比较，给出湖泊形态健康状态综合评价结果。
                </div>
                <div class="introduce">
                  使用的原始数据为斧头湖GF-1号遥感影像，拍摄于2016年2月16号，共B、G、R、NIR四个波段，以GeoTiff格式存储在分布式文件系统HDFS中。
                </div>
                <div class="introduce">处理流程共分为以下三个步骤：</div>
              </el-col>
              <el-row>
                <ol type="1" start="1">
                  <li class="bg-purple">
                    岸线提取
                    <div>
                      1）
                      借助工具GDAL，提取原始影像相关元信息和近红外波段单通道图像，并将近红外图像暂存到后端服务器的本地文件系统；
                    </div>
                    <div>
                      2）
                      针对1）中提取的单通道图像，借助工具OpenCV，使用大津法将图像二值化（灰度阈值设置为127/255）；
                    </div>
                    <div>
                      3）	对二值化图像进行高斯滤波去噪；
                    </div>
                    <div>4）去除非水体的小块图像干扰（小连通域和孔洞）；</div>
                    <div>5）通过“图像腐蚀-去除小连通域-图像膨胀”操作，去除轮廓边缘的干扰域，；</div>
                    <div>
                      6）获取剩余连通域中面积最大的连通域作为湖泊岸线；
                    </div>
                    <div>
                      7）	将最大连通域绘制到TIFF格式图像中，并添加原始地理空间信息，作为湖岸线提取结果，存入分布式文件系统HDFS供后续使用。
                    </div>
                  </li>
                  <li class="bg-purple">
                    岸线指标计算
                    <div class="introduce">
                      岸线指标分为三大类指标，每个指标具体含义参考“岸线指标计算”界面
                    </div>
                    <div>
                      1）基本形态指标：包括岸线长度、湖泊面积、周长面积比等；
                    </div>
                    <div>
                      2）	欧式形态指标：岸线发育系数、湖泊近圆率、湖泊紧凑度等；
                    </div>
                    <div>
                      3）	分形维数指标：分型维数
                    </div>
                    <div class="introduce">
                      其中基本形态指标通过湖岸线提取结果栅格数据、像素分辨率等信息，对水体区域像元统计得到；欧式形态指标通过基本形态指标组合计算得到；分形维数指标通过计盒维数方法计算得到。
                    </div>

                  </li>
                  <li class="bg-purple">
                    形态管控
                    <div>
                      1）	将水体提取结果与岸线红线叠加分析，直观评价岸线提取效果与湖泊形态；
                    </div>
                    2）	将“岸线指标计算”得到的斧头湖各项形态指标与指标正常阈值对比分析，综合各个指标评价结果给出斧头湖形态健康状态整体评价结果
                    <div>
                    </div>
                  </li>
                </ol>
              </el-row>
              <el-button type="primary" class="firstbtn" @click="next()"
              >原始数据</el-button
              >
            </el-row>
          </div>
          <div class="form2" v-if="active == 1">
            <el-row class="mid">
              <el-col :span="14">
                <div class="introduce jiacu">
                  本专题采用一幅斧头湖流域的遥感影像进行湖泊岸线提取和湖泊形态管控分析示例。<br />
                  该幅遥感影像存储于HDFS,路径为“/datum/rasterdata/8/F42A02041602z0.tif”,<br />影像采集时间为2016年2月16日，卫星类别为高分一号，包含四个波段，经度范围为：东经114.151°~114.323°，纬度范围为：北纬29.956°~30.1028°，文件大小为491.11MB。
                </div>

                <el-table :data="tableData">
                  <el-table-column prop="date" label="元数据" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="值" width="180">
                  </el-table-column>
                </el-table>
              </el-col>

              <el-col :span="10">
                <el-image :src="url" class="yssjimg" :preview-src-list="[url]">
                </el-image>
                <div style="text-align: center">(图片点击可预览大图)</div>
              </el-col>

              <el-col :span="24" class="thirdbtn">
                <el-button
                  type="primary"
                  plain
                  @click="prev()"
                  v-if="active > 0"
                  class=""
                >上一步</el-button
                >
                <el-button type="primary" plain @click="next()" class=""
                >下一步</el-button
                >
              </el-col>
            </el-row>

            <!-- 遥感影像列表 -->
            <!-- <div v-for="(item, index) in list" :key="index" class="Datalist">
              <div class="filename">
                <span>文件名称:</span>
                <span v-html="item.filename"></span>
              </div>
              <el-row type="flex" class="row-bg">
                <div class="uploadInstitution jigou">
                  <span>上传机构:</span>{{ item.uploadInstitution }}
                </div>
                <div class="uploadInstitution jigou">
                  <span>上传时间:</span>{{ item.uploadTime }}
                </div>
              </el-row>

              <el-row type="flex" class="row-bg">
                <div class="uploadInstitution jigou">
                  <span class="bold">所属地区:</span>{{ item.district }}
                </div>
                <div class="uploadInstitution jigou">
                  <span>所属专题:</span>{{ item.topic | topicFormat }}
                </div>
              </el-row>
              <div class="uploadInstitution">
                <span class="bold">文件摘要:</span>{{ item.summary }}
              </div>

              <el-row type="flex" class="row-btn">
                <el-button
                  type="primary"
                  icon="el-icon-document"
                  round
                  size="small"
                  @click="opendialog(item.id)"
                  >详细信息</el-button
                >
                <el-button
                  type="success"
                  round
                  size="small"
                  @click="next(item.filename)"
                  >下一步</el-button
                >
              </el-row>

              <el-image :src="url" class="tp" :preview-src-list="[url]">
              </el-image>
              <el-dialog
                title="查看详情"
                :visible.sync="dialogVisible"
                width="40%"
                class="dialog"
              >
                <el-table :data="gridData">
                  <el-table-column
                    property="date"
                    width="140"
                  ></el-table-column>
                  <el-table-column property="name" width=""></el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer"> </span>
                <el-row style="margin-top: 15px">
                  <div
                    style="float: left; margin-left: 10px; margin-right: 80px"
                  >
                    缩略图
                  </div>

                  <img :src="pic" @click="tomap(item.id)" />
                </el-row>
              </el-dialog>
            </div> -->
            <!-- 遥感影像列表结束 -->
          </div>
          <div class="form3" v-if="active == 2">
            <el-row class="mid">
              <div class="introduce jiacu">
                岸线提取：岸线提取所用到的原始遥感影像存储于HDFS分布式文件系统中。借助Spark计算框架、OpenCV、GDAL等处理工具提取水体部分，生成湖泊岸线TIFF格式栅格数据，存储于HDFS中以供后续使用，存储路径为 “/datum/rasterdata/8F42A02041602z0_contour.tif”。
              </div>
              <el-col :span="12">
                <el-image :src="url" class="yuantu" :preview-src-list="srcList">
                </el-image>
                <div class="wenzi">原始图像</div>
                <div style="text-align: center">(图片点击可预览大图)</div>
              </el-col>
              <el-col :span="12">
                <div class="row-bg">
                  <img :src="picAfter" class="yuantutwo" />
                  <div class="wenzi">轮廓提取结果</div>
                  <div class="jzz">{{ jiazaizhong }}</div>
                </div>
                <div
                  v-loading="loading"
                  element-loading-text="加载中..."
                  class="zzc"
                ></div>
              </el-col>
              <el-col :span="24">
                <div class="introduce">轮廓提取算法的主要步骤如下：</div>
                <ol type="1" start="1">
                  <li class="bg-purple">
                    借助工具GDAL，提取原始影像相关元信息和近红外波段单通道图像，并将近红外图像暂存到后端服务器的本地文件系统；                  </li>
                  <li class="bg-purple">
                    针对1）中提取的单通道图像，借助工具OpenCV，使用大津法将图像二值化（灰度阈值设置为127/255）；
                  </li>
                  <li class="bg-purple">	对二值化图像进行高斯滤波去噪；</li>
                  <li class="bg-purple">
                    去除非水体的小块图像干扰（小连通域和孔洞）；
                  </li>
                  <li class="bg-purple">
                    通过“图像腐蚀-去除小连通域-图像膨胀”操作，去除轮廓边缘的干扰域；
                  </li>
                  <li class="bg-purple">
                    获取剩余连通域中面积最大的连通域作为湖泊岸线；
                  </li>
                  <li class="bg-purple">
                    将最大连通域绘制到TIFF格式图像中，并添加原始地理空间信息，作为湖岸线提取结果，存入分布式文件系统HDFS供后续使用。
                  </li>
                </ol>
              </el-col>
              <el-col :span="24" class="thirdbtn">
                <el-button
                  type="primary"
                  plain
                  @click="prev()"
                  v-if="active > 1"
                  class=""
                >上一步</el-button
                >
                <el-button type="primary" plain @click="next()" class="xiayibu"
                >下一步</el-button
                >
              </el-col>
            </el-row>
          </div>
          <div class="form4" v-if="active == 3">
            <el-row class="mid">
              <div class="introduce jiacu">岸线指标计算：从HDFS的路径“/datum/rasterdata/8F42A02041602z0_contour.tif”中加载湖岸线提取结果栅格数据，通过基于像元统计、分盒维数的方法计算岸线各形态指标，将计算结果存储于MySQL数据库中。</div>
              <el-col :span="12">
                <el-table
                  :data="formtableData"
                  style="width: 100%; margin-bottom: 50px"
                >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="">
                          <span>{{ props.row.zc }}</span>
                          <div>{{ props.row.jsz }}</div>
                          <span>{{ props.row.mj }}</span>
                          <span>{{ props.row.pa }}</span>
                          <span>{{ props.row.fr }}</span>
                          <div>
                            <img :src="props.row.frimg" style="width: 100%" />
                          </div>
                          <div>{{ props.row.frdec }}</div>
                          <span>{{ props.row.jcz }}</span>
                          <span>{{ props.row.sdi }}</span>
                          <span>{{ props.row.sbd }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column label="" prop="id"> </el-table-column>
                  <el-table-column label="" prop="name"> </el-table-column>
                </el-table>
                <el-button
                  type="primary"
                  plain
                  @click="prev()"
                  v-if="active > 2"
                  class="shangyibulast"
                >上一步</el-button
                >
                <el-button type="primary" plain @click="next()" class=""
                >下一步</el-button
                >
              </el-col>
              <el-col :span="12">
                <img :src="picAfter" class="tiqupic" />
              </el-col>
            </el-row>
          </div>
          <div class="form5" v-if="active == 4">
            <el-row class="mid">
              <el-col :span="24">
                <div class="introduce jiacu">
                  形态管控：从MySQL中获取各形态指标计算结果和相应参考值，通过对比分析，对各项指标做出评价，进而评价湖泊形态整体健康程度，评价结果存入MySQL数据库，并将岸线红线与提取结果叠置，直观评价岸线提取效果与湖泊形态。
                </div>
                <div class="introduce">
                  据此，得到斧头湖形态指标红线阈值与2016年2月的实际计算值，如下表所示：
                </div>
              </el-col>
              <table cellspacing="0" cellpadding="5" class="hpfx">
                <tbody>
                <tr>
                  <td style="border-left: 1px solid; border-top: 1px solid">
                    指标类型
                  </td>
                  <td style="border-top: 1px solid">指标名称</td>
                  <td style="border-top: 1px solid">红线阀值（min）</td>
                  <td style="border-top: 1px solid">红线阀值（max）</td>
                  <td style="border-top: 1px solid">当前计算值（2月份）</td>
                </tr>
                <tr>
                  <td rowspan="3" style="border-left: 1px solid">
                    基本几何形态指标
                  </td>
                  <td>周长</td>
                  <td>140</td>
                  <td>225</td>
                  <td>151</td>
                </tr>
                <tr>
                  <td>面积（枯水期）</td>
                  <td>98</td>
                  <td>120</td>
                  <td>122</td>
                </tr>
                <tr>
                  <td>面积（丰水期）</td>
                  <td>130</td>
                  <td>138</td>
                  <td>----</td>
                </tr>
                <tr>
                  <td rowspan="4" style="border-left: 1px solid">
                    欧式几何形态指标
                  </td>
                  <td>周长面积比</td>
                  <td>14.76</td>
                  <td>16.37</td>
                  <td>15.00</td>
                </tr>
                <tr>
                  <td>形状复杂度</td>
                  <td>0.75</td>
                  <td>0.97</td>
                  <td>0.93</td>
                </tr>
                <tr>
                  <td>形状紧凑度</td>
                  <td>0.35</td>
                  <td>0.45</td>
                  <td>0.37</td>
                </tr>
                <tr>
                  <td>岸线发育系数</td>
                  <td>3.7</td>
                  <td>5.0</td>
                  <td>3.9</td>
                </tr>
                <tr>
                  <td style="border-left: 1px solid">分形维数指标</td>
                  <td>岸线分形维数</td>
                  <td>1.14</td>
                  <td>1.20</td>
                  <td>1.19</td>
                </tr>
                </tbody>
              </table>
              <div class="introduce">
                管控分析：根据以上数值，可以发现2016年2月份，斧头湖各项形态指标均在设置的红线阈值范围内。注意的是，虽然2月份是枯水期，但计算得出的湖泊面积较大。综合各项指标，得出2016年2月份斧头湖的形态指标分析结果为：良好。（参考分级：极差-较差-中等-良好-极好）
              </div>
              <el-button
                type="primary"
                plain
                @click="prev()"
                v-if="active > 3"
                class="shangyibulast"
              >上一步</el-button
              >
              <!-- <el-button type="primary" plain @click="next()" class=""
                  >下一步</el-button
                > -->
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  search,
  gettopicdetailData,
  prefix,
  getContour,
  getAnalysis,
  getContourPic,
} from "../../Api/api"; //调用按专题浏览文件接口,详情

export default {
  filters: {
    topicFormat(value) {
      let text =
        value === "0"
          ? "防洪抗旱"
          : value === "1"
          ? "河流水系"
          : value === "2"
            ? "水环境"
            : value === "3"
              ? "水利工程"
              : value === "4"
                ? "水文"
                : value === "5"
                  ? "水资源"
                  : value === "6"
                    ? "统计年鉴"
                    : value === "7"
                      ? "政策规划"
                      : value === "8"
                        ? "地理空间"
                        : value === "9"
                          ? "其他"
                          : "";
      // let text = value === '0' ? '防洪抗旱' : (value === '1' ? '河流水系':(value === '2' ? '水环境' :'')),
      return text;
    },
  },
  data() {
    return {
      picAfter: "",
      url: require("../../assets/images/F42A.jpg"),
      srcList: [
        require("../../assets/images/F42.jpg"),
        //还有一个在后面push写的
      ],
      //原始数据
      tableData: [
        {
          date: "文件名称",
          name: "F42A02041602z0.tif",
        },
        {
          date: "保密级别",
          name: "公开级",
        },
        {
          date: "版权所有",
          name: "中国水利水电科学研究院",
        },
        {
          date: "产品日期",
          name: "2016-02-26",
        },
        {
          date: "文件摘要",
          name: "斧头湖遥感影像",
        },
        {
          date: "文件格式",
          name: "GEOTIFF",
        },
        {
          date: "数据大小",
          name: "491.11MB",
        },
        {
          date: "西界经度",
          name: "东经114.151°",
        },
        {
          date: "东界经度",
          name: "东经114.323°",
        },
        {
          date: "南界纬度",
          name: "北纬29.956°",
        },
        {
          date: "北界纬度",
          name: "北纬30.1028°",
        },
        {
          date: "接收日期",
          name: "2016-02-16",
        },
        {
          date: "卫星名称",
          name: "GF-1",
        },
        {
          date: "波段",
          name: "1,2,3,4",
        },
      ],
      loading: false,
      active: 0,
      pic: "",
      jiazaizhong: "",
      istu: true, //岸线提取默认显示原图
      mapPathRoot: prefix, //默认路径
      gridData: [],
      formtableData: [
        {
          id: "周长（P）",
          name: "151.67km",
          zc: "周长（Perimeter），指湖泊边界轮廓线总长度",
          jsz: "  当前计算值为151.67km。",
        },
        {
          id: "面积（A）",
          name: "122.0161km²",
          mj:
            "面积（Area），指湖泊水体的水平投影面积。当前计算值为122.0161km²。",
        },
        {
          id: "周长面积比（PAR）",
          name: "15.0028",
          pa:
            "周长面积比（Perimeter-Area Rate），指湖泊周长与面积的比值。该指标用于度量湖泊形态的紧凑度。当形状为圆时，周长面积比最小，其值为1；越呈长条状，周长面积比越大。当前计算值为15.0028，数值偏高，反映了斧头湖轮廓形状狭长、岸线走势复杂的特点。",
        },
        {
          id: "形状复杂度（FR）",
          name: "0.9333",
          fr:
            "形状复杂度（Form Ratio），指湖泊形状的复杂程度。常用基于周长面积比的A/S法计算。根据A/S法，圆的形状复杂度为0，几种简单形状的复杂度计算值如下图所示：",
          frimg: require("../../assets/images/frimg.png"),
          frdec:
            "当前计算值为0.9333，数值很高，反映出斧头湖岸线形状复杂，较易形成局部形状封闭的特点。",
        },
        {
          id: "形状紧凑度（C）",
          name: "0.3730",
          jcz:
            "形状紧凑度（Compactness），指湖泊形状的紧凑程度。当前计算值为0.3730，数值偏小，反映了斧头湖岸线形态发散、紧凑程度低。",
        },
        {
          id: "岸线发育系数（SDI）",
          name: " 3.8733",
          sdi:
            "岸线发育系数（Shoreline Development Index），指湖泊岸线长度与等于湖泊面积的圆面积的周长之比。该指标用于表示湖泊岸线的不规则程度。岸线发育系数越大，表示湖泊岸线越复杂、破碎程度越高。研究表明该指标与水生植物多样性存在显著正相关关系。当前计算值为3.8733，而90%的世界天然湖泊中岸线发育系数低于3.0。该指标偏高，一方面反映了斧头湖具备开展鱼类养殖和水生植物种植的天然优势，另一方面也反映了人类活动的影响，使得斧头湖岸线形态趋于棱角化，而不是在波浪运动和塌岸作用下趋于圆滑。",
        },
        {
          id: "岸线分形维数（SBD）",
          name: "1.1885",
          sbd:
            "岸线分形维数（Shoreline Box Dimension），指湖泊岸线的计盒维数。该指标用于描述湖泊岸线的分形特征，其值介于1和2之间。其值越接近1，表明岸线形状越规则，比如呈现出顺直的、或者少量折线的形状；其值越接近2，表明岸线形状越复杂。当前计算值为1.1885，典型人工湖泊的分形维数值为1.211，典型天然湖泊的分形维数值为1.044。可见当前计算值介于典型人工湖泊和典型天然湖泊之间，可以认为斧头湖的湖泊岸线受人为影响较大。实际上，斧头湖的确存在围栏养殖、过度捕捞等现象。研究表明，当岸线分形维数等于1.5时，表明该分析对象于布朗随机运动状态。因此当分形维数越接近1.5，表明这个湖泊的稳定性越差。当前计算值并没有非常接近1.5，表示湖泊的稳定性尚可。",
        },
      ],
      emptytext: "",
      //  dataText:"",
      dialogVisible: false,
      // filename:'',
      list: [],
      params: {
        startNum: 0,
        pagesize: 10,
        sortOrder: "",
        sortBy: "",
        query: "F42A02041602z0.tif",
        topic: "",
      },
    };
  },

  methods: {
    prev() {
      --this.active;
      if (this.active < 0) this.active = 0;
    },
    //步骤条
    //步骤条
    on_click(e) {
      console.log(e);
      // if(e!=''|| e!= null){
      //     this.active=e;
      // }
      if (e < this.active) {
        this.active = e;
      }
    },
    //岸线轮廓提取
    next(filename) {
      this.init();
      let that = this;
      (filename = "F42A02041602z0.tif"), (that.loading = true);
      getContourPic({ filename: filename }).then(function (res) {
        if (
          res.status === 200 &&
          res.data.code === 0 &&
          res.data.data != null
        ) {
          that.picAfter = "data:image/png;base64," + res.data.data;
          console.log(that.picAfter);
          that.srcList.push(that.picAfter);
        } else {
          that.jiazaizhong = "图像显示中，请稍后";
        }
        that.loading = false;
      });

      //指标计算
      // that.emptytext = "加载中";
      // getAnalysis().then(function (res) {
      //   if (res.status === 200 && res.data.code === 0) {
      //     that.contourData = [
      //       {
      //         date: "水体面积(m²)",
      //         name: res.data.data.nowArea.toFixed(3),
      //       },
      //       {
      //         date: "岸线长度(m)",
      //         name: res.data.data.nowLength.toFixed(3),
      //       },
      //       {
      //         date: "形状复杂度",
      //         name: res.data.data.fr.toFixed(3),
      //       },
      //       {
      //         date: "周长面积比",
      //         name: res.data.data.x.toFixed(3),
      //       },
      //       {
      //         date: "岸线发育系数",
      //         name: res.data.data.sdi.toFixed(3),
      //       },
      //       {
      //         date: "岸线分形维数",
      //         name: res.data.data.sbd.toFixed(3),
      //       },
      //       {
      //         date: "形状近圆率",
      //         name: res.data.data.circularity.toFixed(3),
      //       },
      //       {
      //         date: "形状紧凑度",
      //         name: res.data.data.compactness.toFixed(3),
      //       },
      //     ];
      //     //当数据为空时，再显示暂无数据
      //     if (that.contourData.length === 0) {
      //       that.emptytext = "暂无数据";
      //     }
      //   }
      // });

      if (this.active++ > 4) this.active = 0;
    },

    //显示列表信息
    init() {
      let that = this;
      search(this.params).then(function (res) {
        //  console.log(res.data.data);
        if (res.status === 200 && res.data.code === 0) {
          that.list = res.data.data;
        }
      });
    },
    opendialog(id) {
      sessionStorage.setItem("id", id);
      console.log(id);
      this.dialogVisible = true;
      let that = this;
      // 在這調用詳情數據
      gettopicdetailData({ id: id }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.gridData = [
            {
              date: "文件名称:",
              name: res.data.data.filename,
            },
            {
              date: "上传机构:",
              name: res.data.data.uploadInstitution,
            },
            {
              date: "上传时间",
              name: res.data.data.uploadTime,
            },
            {
              date: "文件摘要",
              name: res.data.data.summary,
            },
            {
              date: "所属地区",
              name: res.data.data.district,
            },
            {
              date: "所属专题",
              name: res.data.data.topic === "8" ? "地理空间" : "",
            },
            {
              date: "上传者",
              name: res.data.data.uploader,
            },
            {
              date: "文件统计起始时间",
              name: res.data.data.startTime,
            },
            {
              date: "文件统计终止时间",
              name: res.data.data.endTime,
            },
            {
              date: "文件大小",
              name: res.data.data.fileSize,
            },
            {
              date: "文件类型",
              name: res.data.data.fileType,
            },
          ];

          that.pic = "data:image/png;base64," + res.data.data.png;
        }
      });
    },

    //调转地图
    tomap(id) {
      this.dialogVisible = false;
      console.log(id);
      let that = this;
      id = sessionStorage.getItem("id");
      //新窗口打开
      let routeData = this.$router.resolve({
        path: "/components/FileBrowsemap",
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style scoped>
.content {
  width: 90%;
  margin: 0 auto;
  /* border: 1px solid; */
  /* height: 500px; */
  position: relative;
}

.mid {
  width: 90%;
  margin: 0 auto;
}
.thirdbtn {
  margin-top: 30px;
  /* border:1px solid; */
}
.xiayibu {
  /* float: right; */
}

.hpfx td {
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.introduce {
  color: #3a3838;
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bg-purple {
  color: #3a3838;
  margin-bottom: 20px;
}
.firstbtn {
  float: right;
  margin-top: 20px;
}
.yssjimg {
  margin-left: 30px;
  margin-top: 20px;
}
.tiqupic {
  margin-top: 40px;
  float: right;
  width: 70%;
}
.zzc {
  position: relative;
  top: -230px;
}
.xyb {
  margin-top: 20px;
}
.mbx {
  padding-top: 20px;
  margin-bottom: 20px;
}
.mbxtwo {
  padding-top: 20px;
  padding-left: 50px;
  display: block;
  text-decoration: none;
  color: #666;
  /* width: 330px; */
}
.mbxtwo:hover {
  color: #0066cc;
}

.jzz {
  position: absolute;
  left: 62%;
  top: 45%;
}

.shangyibulast {
  margin-top: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.filename {
  font-size: 16px;
  color: #0066cc;
  font-weight: bold;
}
.jigou {
  width: 260px;
}
.Datalist {
  /* border-bottom: 1px solid #e5e5e5;
  padding-bottom: 30px; */
  padding-top: 30px;
}
.Datalist span {
  padding-right: 10px;
}
.bold {
  font-weight: bold;
}

.uploadInstitution {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}
.row-btn {
  margin-top: 14px;
  margin-bottom: 10px;
}

.yuantu {
  padding: 30px;
}
.yuantutwo {
  padding: 30px;
  width: 77%;
}
.wenzi {
  text-align: center;
}

.jiazai {
  height: 100px;
  width: 100px;
  background-color: red;
}
.jiacu{
  font-weight: bold;
}
</style>
<style>
.dialog .el-table thead {
  display: none;
}
.dialog .el-dialog__body {
  padding: 0px 20px;
}
.paging {
  text-align: center;
  margin-top: 30px;
}
</style>
